<template>
<div>
  <router-link :key="item.gid" tag="li" v-for="item in listData" class="md-list-item" :to="{'name': 'gallery', params: {gid: item.gid, token: item.token}}">
    <md-card>
      <md-ink-ripple/>
      <md-card-header>
        <md-card-media md-medium>
          <img v-lazy.home-list="item.thumb" alt="thumb">
        </md-card-media>
        <md-card-header-text>
          <div class="md-title">{{item.title}}</div>
          <div class="md-subhead">{{item.uploader}}</div>
          <ratings :rating="item.rating"></ratings>
          <md-chip :class="item.category">{{item.category.toUpperCase()}}</md-chip>
          <div class="md-card-footer">
            <div class="simple-language">{{item.lang}}</div>
            <div class="post-time">{{item.date}}</div>
          </div>
        </md-card-header-text>
      </md-card-header>
    </md-card>
  </router-link>
</div>
</template>
<script>
export default {
  props: ['listData'],
  components: {
    ratings: require('./rattingStars')
  }
}
</script>
<style scoped>
.md-list-item {

}
.md-card .md-card-header .md-card-media.md-medium {
  width: 4.539rem;
  -ms-flex: 0 0 4.539rem;
  flex: 0 0 4.539rem;
  height: 4.539rem;
}
.mint-loadmore-content {
  height: 100%;
}
.md-card {
  overflow: hidden
}
.md-card .md-card-header .md-card-media {
  margin-left: 0;
  display: flex;
  align-items: center;
  padding: .52rem;
  overflow: hidden;
}
.md-card .md-card-header .md-card-header-text {
  margin-left: 16px
}
.md-card .md-title {
  font-size: 14px;
  line-height: 19px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.md-card .md-subhead {
  font-size: 13px;
}
.md-card-footer {
  position: absolute;
  right: 10px;
  bottom: 10px
}
.simple-language {
  text-align: right
}
.md-chip {
  color: #fff;
  padding: 4px 6px;
  height: auto;
  margin-top: 5px
}
.md-chip.western, .md-chip.Western {
  background: #8CC24A!important
}
.md-chip.artistcg, .md-chip.Artist.CG.Sets {
  background: #F9C130!important
}
.md-chip.doujinshi, .md-chip.Doujinshi {
  background: #F34334!important
}
.md-chip.non-h, .md-chip.Non-H {
  background: #2196F5!important
}
.md-chip.Misc, .md-chip.misc {
  background: #F06292!important
}
.md-chip.imageset {
  background: #3F51B5!important
}
.md-chip.cosplay, .md-chip.Cosplay {
  background: #9D29B2!important
}
.md-chip.gamecg, .md-chip.Game.CG.Sets {
  background: #4CB050!important
}
.md-chip.manga, .md-chip.Manga {
  background: #FF9700!important
}
.md-chip.asianporn {

}
</style>
